<template>
  <div class="homepage">
    <div class="top1">
      <p class="hybroker">宏业经纪人</p>
      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201410%2F30%2F20141030044137_GmwsS.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633006287&t=b1920799e9822fbdd1d2ff05ae21bdd7"
        alt=""
        class="portrait"
      />
      <p class="name">王小明</p>
    </div>
    <div class="center1">
      <dl>
        <dt>{{ newTotal }}</dt>
        <dd><router-link to="/newhouse">新房</router-link></dd>
      </dl>
      <dl>
        <dt>{{ oldTotal }}</dt>
        <dd><router-link to="/secondhouse">二手房</router-link></dd>
      </dl>
      <dl>
        <dt>{{ secondaryTotal }}</dt>
        <dd><router-link to="/rentalhouse">出租房</router-link></dd>
      </dl>
    </div>
    <div class="button1">
      <dl>
        <dt><i class="iconfont icon-xiaoxi"></i></dt>
        <dd><router-link to="/message">消息</router-link></dd>
      </dl>
      <dl>
        <dt><i class="iconfont icon-qiuzu"></i></dt>
        <dd><router-link to="/begRent">求租</router-link></dd>
      </dl>
      <dl>
        <dt><i class="iconfont icon-wodetuangou"></i></dt>
        <dd><router-link to="/askbuy">求购</router-link></dd>
      </dl>
      <dl>
        <dt><i class="iconfont icon-icbuy"></i></dt>
        <dd><router-link to="/realmarket">楼市圈</router-link></dd>
      </dl>
      <dl>
        <dt><i class="iconfont icon-zhibo"></i></dt>
        <dd><router-link to="/live">直播</router-link></dd>
      </dl>
      <dl>
        <dt><i class="iconfont icon-icbuy"></i></dt>
        <dd><router-link to="/group">团购</router-link></dd>
      </dl>
      <dl>
        <dt><i class="iconfont icon-paihangbang"></i></dt>
        <dd><router-link to="/ranklist">排行榜</router-link></dd>
      </dl>
      <dl>
        <dt><i class="iconfont icon-zhanji"></i></dt>
        <dd><router-link to="/maifang">战绩</router-link></dd>
      </dl>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { ref } from "vue";
export default {
  setup() {
    let data = ref([]);
    let newTotal = ref("");
    let oldTotal = ref("");
    let secondaryTotal = ref("");
    return {
      data,
      newTotal,
      oldTotal,
      secondaryTotal,
    };
  },
  created() {
    axios.get("/home").then((res) => {
      this.data = res.data;
      this.newTotal = res.data.data.newTotal;
      this.oldTotal = res.data.data.oldTotal;
      this.secondaryTotal = res.data.data.secondaryTotal;
    });
  },
};
</script>

<style lang="scss" scoped>
.homepage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  // 头部
  .top1 {
    width: 100%;
    height: 240px;
    background: #1786f6;
    // 宏业经纪人
    .hybroker {
      padding-left: 20px;
      padding-top: 15px;
      color: #fff;
      font-size: 20px;
    }
    // 头像
    .portrait {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin: 0 auto;
      display: block;
    }
    // 姓名
    .name {
      text-align: center;
      color: #fff;
      font-size: 18px;
    }
  }
  // 中间的盒子
  .center1 {
    width: 95%;
    height: 120px;
    border-radius: 15px;
    background: #fff;
    margin: -30px auto;
    border: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: space-around;
    dl {
      width: calc(100% / 3);
      dt {
        margin-left: 40px;
        text-align: center;
        color: #64c8ff;
        font-size: 30px;
      }
      dd {
        text-align: center;
        a {
          text-decoration: none;
          color: #bdbdbd;
          font-size: 16px;
        }
      }
    }
  }
  .button1 {
    margin-top: 28px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    dl {
      width: calc(100% / 3);
      height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      dt {
        margin-left: 40px;
        .iconfont {
          font-size: 28px;
        }
      }
      dd {
        a {
          text-decoration: none;
          color: #000;
          font-size: 16px;
        }
      }
    }
  }
}
</style>